<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			订单管理
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			集市展位订单
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-heart-3-fill" style="color:#999;font-size:18px;"></i>
				<!-- <i-icon size="30upx" color="#999" name="heart-3-fill"></i-icon> -->
				集市展位订单
			</view>
		</view>
		<view class="p-table">
			<view class="bc" style="margin-bottom: 10px;">
				<input type="text" v-model="search.keyword" placeholder="输入购买人名称或站点名称" style="width: 300px;"
					class="r10" />
				<select v-model="search.orderStatus" style="width: 150rpx" class="r10">
					<option value="">订单状态</option>
					<option value="CANCEL">已取消</option>
					<option value="WAIT_REFUND">退款中</option>
					<option value="SUCCESS">已付款</option>
				</select>
				<view class="p-date-box r10">
					<picker mode="date" @change="selectDate($event,1)" class="p-date">
						<view>{{search.startDate||'开始日期'}}</view>
					</picker>
					<text>到</text>
					<picker mode="date" @change="selectDate($event,2)" class="p-date">
						<view>{{search.endDate||"结束日期"}}</view>
					</picker>
					<button type="button" class="p-btn" @click="search.startDate='';search.endDate='';">重置</button>
				</view>
				<button class="r10" type="button" @click="searchOrder()">搜索</button>
				<export-excel v-if="boothOrderPage.records && boothOrderPage.records.length>0"
					:data="boothOrderPage.records" name="表格.xls" :fields="excelFields">
					<button class="b-dell">导出表格</button>
				</export-excel>
			</view>
			<hr />
			<table class="pure-table pure-table-horizontal">
				<tr>
					<th>订单id</th>
					<th>所属站点</th>
					<th>购买者手机号</th>
					<th>摆展位置</th>
					<th>展位面积/m²</th>
					<th>展位名称</th>
					<th>购买日期</th>
					<th>展位开放时段</th>
					<th>所属物业</th>
					<th>费用</th>
					<th>付款时间</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in boothOrderPage.records" :key="index">
					<td style="text-align: center;">{{item.id}}</td>
					<td style="text-align: center;">{{item.stationName}}</td>
					<td style="text-align: center;">
						{{item.payerName}}<br />
						{{item.payerPhone}}
					</td>
					<td style="text-align: center;">{{item.boothLocation}}</td>
					<td style="text-align: center;">{{item.boothArea}}</td>
					<td style="text-align: center;">{{item.boothName}}</td>
					<td style="text-align: center;">
						{{item.purchasedDates}}
					</td>
					<td style="text-align: center;">{{item.period}}</td>
					<td style="text-align: center;">{{item.propertyName}}</td>
					<td style="text-align: center;">{{item.amount}}</td>
					<td style="text-align: center;">
						{{item.createDatetime}}
					</td>
					<td style="text-align: center;">
						<view v-if="item.status=='成功'" class="bz">
							<i class="ri-money-cny-circle-fill r10" style="color:#FF392B;font-size:16px;"></i>
							已付款
						</view>
						<view v-else-if="item.status=='已退款'" class="bz">
							<i class="ri-funds-fill r10" style="color:#00aa00;font-size:16px;"></i>
							已退款
						</view>
						<view v-else-if="item.status=='已取消'" class="bz">
							<i class="ri-checkbox-circle-fill r10" style="color:#c2c2c2;font-size:16px;"></i>
							已取消
						</view>
						<view v-else class="bz">
							{{item.status}}
						</view>
					</td>
					<td style="text-align: center;">
						<text style="color: #7800BE;" @click="node=item">详情</text>
					</td>
				</tr>
				<tr v-if="boothOrderPage.records==null|| boothOrderPage.records.length==0">
					<td colspan="12" style="text-align: center;color: #848484; ">暂无数据</td>
				</tr>
			</table>
			<view class="bz t20">
				<Pagination :total="boothOrderPage.total" :pageSize="boothOrderPage.size"
					:nowPage="boothOrderPage.current" @change="alterCurrent">
				</Pagination>
				<picker mode="selector" :range="[10,20,30,50,100]"
					@change="boothOrderPage.size=[10,20,30,50,100][$event.detail.value];searchOrder()"
					class="p-selector">
					{{boothOrderPage.size}}条/页
				</picker>
			</view>
		</view>
		<view v-if="node" class="p-appoint-detail">
			<view style="border-bottom:1rpx solid #CCCCCC;height:50rpx;line-height:50rpx;" @click="node=null">
				<text style="font-size: 18px;margin-left: 15px;">订单详情</text>
				<text style="float:right;margin-right:25rpx;cursor:pointer;">关闭</text>
			</view>
			<view style="max-height:90vh;overflow-y:auto;line-height:40rpx;margin-top: 30px;">
				<view v-for="(value,key,index) in excelFields" :key="index">
					<text class="p-td">{{key}}</text>{{node[value]}}
				</view>
			</view>
		</view>
		<view class="footer">
			<p><text style="margin-right: 5upx;">Copyright © 2022 桂民社区服务站</text>
				<text>Powered by 奇果科技</text>
			</p>
		</view>
	</view>
</template>

<script>
	let that;
	import Pagination from "@/components/pagination.vue"
	import exportExcel from '@/components/json-2-excel/Json2Excel.vue'
	export default {
		components: {
			Pagination,
			exportExcel
		},
		data() {
			return {
				boothOrderPage: {
					records: [],
					current: 1,
					size: 10,
					pages: 0,
					total: 0
				},
				node: '',
				search: {
					orderType: '',
					orderStatus: 'SUCCESS',
					keyword: '',
					startDate: '',
					endDate: ''
				},
				excelFields: {
					"订单id": "id",
					"所属站点": "stationName",
					"购买者ID": "payerId",
					"购买者": "payerName",
					"购买者手机号": "payerPhone",
					"摆展位置": "boothLocation",
					"展位面积/m²": "boothArea",
					"展位名称": "boothName",
					"购买日期": "purchasedDates",
					"展位开放时段": "period",
					"所属物业": "propertyName",
					"类型": "type",
					"费用": "amount",
					"付款时间": "createDatetime",
					"状态": "status",
					"状态消息": "finishMsg"
				},
				orderConst: {
					status: {
						BEING_PROCESSED: '处理中',
						SUCCESS: '成功',
						FAIL: '失败',
						WAIT_SUBMIT: '待提交',
						CANCEL: '已取消'
					},
					type: {
						WeChat_PAY: '微信支付'
					}
				}
			}
		},
		methods: {
			/**
			 * 获取摊位订单列表
			 */
			getBoothOrderList: function(current, size) {
				let params = '?current=' + (current || 1) + '&size=' + (size || 10);
				if (this.search) {
					for (let key in this.search) {
						if (this.search[key]) {
							params += '&' + key + '=' + this.search[key];
						}
					}
				}
				this.httpRequest({
					url: '/marketBooth/getBoothOrderList' + params,
					method: 'GET',
					fn: function(data) {
						// console.log("展位订单列表：", data.records)
						that.boothOrderPage.records = data.records
						that.boothOrderPage.current = parseInt(data.current)
						that.boothOrderPage.size = parseInt(data.size)
						that.boothOrderPage.total = parseInt(data.total)
						that.boothOrderPage.pages = parseInt(data.pages)
						for (let item of data.records) {
							item['period'] = item.openingTime + '至' + item.closingTime
							item['amount'] = '￥' + item.amount
							for (let key in that.orderConst.status) {
								if (item.status == key) {
									item.status = that.orderConst.status[key]
									break
								}
							}
							for (let key in that.orderConst.type) {
								if (item.type == key) {
									item.type = that.orderConst.type[key]
									break
								}
							}
						}
					}
				});
			},
			alterCurrent: function(c) {
				if (c) {
					if (c <= this.pages && c >= 1) {
						this.current = c;
						this.getBoothOrderList()
					}
				}
			},
			alterSize() {
				this.getBoothOrderList()
			},
			/**
			 * 搜索预约订单
			 */
			searchOrder() {
				this.getBoothOrderList(1, this.boothOrderPage.size)
			},
			//选择日期
			selectDate(e, i) {
				if (i == 1) {
					this.search.startDate = e.detail.value;
				} else if (i == 2) {
					this.search.endDate = e.detail.value;
				}
			}
		},
		onLoad: function() {
			that = this
			this.getBoothOrderList()
			// this.tree = this.testData
		},
	}
</script>
<style>


</style>
